import React, { Component } from 'react';
import {
	StyleSheet, Text, View, ScrollView, FlatList
} from "react-native";
import { GLOBAL } from '../../../../config/global';
import { orderStyle, commonStyle, commen } from '../_common/style';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';
import OrderDetailsService from '../_common/service';
import { TopShowCpt } from '../_components/TopShowCpt';
import { TabCpt } from '../_components/TabCpt';
import { style } from '../../../../theme/style';
const scale = GLOBAL.SCALE;

export class OrderLogisticsComponent extends Component {
	static navigationOptions = {
		header: null
	}

	constructor(props) {
		super(props);
		console.log('仓库页面参数', props)
		let { orderType, orderId, tCode } = this.props.data || {};
		this.propsSend = { orderType, orderId, tCode };
		this.state = {
			status: 'loading',
			stockData: null,
			statusName: ''
		}
		this.sendData = {
			pageNo: 1,
			pageSize: 20,
			totalPage: 0,
			orderId,
		}
	}

	async	componentWillMount () {

		this._init();
	}

	componentWillUnmount () {

	}

	//初始化
	_init = () => {
		this._getPoolData();
		this._getData();
		this._getDataOrder();
	}


	//_ 初始数据
	_getDataOrder = async () => {
		let {data,orderData } =this.props||{};
		if (orderData) {
			this.setState({
				statusName: orderData.statusName
			})
		}
	}

	// 获取数据汇总
	_getPoolData = async () => {
		let responseData = await OrderDetailsService.stockPool({ orderId: this.propsSend.orderId });
		console.log('仓库汇总数据', responseData)
		if (!responseData) return;
		this.setState({ poolData: responseData })
	}

	//获取数据 - 通知
	_getData = async () => {
		let tzData = await OrderDetailsService.stockList(this.sendData);
		console.log('通知数据', tzData);
		if (tzData && tzData.rows && tzData.rows.length) {
			this.sendData.totalPage = tzData.totalPage;
			this.setState({ stockData: tzData.rows })
		} else {
			this.setState({ status: 'empty' })
		}
	}


	// 一条数据模版
	_renderPayItemView = (customer) => {
		return (
			<TabCpt data={{ itemData: customer.item || null, flagData: this.propsSend }} />
		)
	}

	// 下拉更新函数
	_onEndPayReached = () => {
		if (this.sendData.pageNo < this.sendData.totalPage) {
			this.sendData.pageNo++;
			this._getData();
		}
	}

	render () {
		console.log('提货-page')
		let { status, stockData, poolData, statusName } = this.state;
		let { contactQuantity, noticeQuantity, sendQuantity, unSendQuantity } = poolData || {};
		return (
			<View style={orderStyle.container}>
				<View style={orderStyle.scollBox}>
					<View style={orderStyle.showBox}>
						<TopShowCpt data={{
							imgData: { big: contactQuantity, small: sendQuantity },
							listData: [
								{ title: `下单量`, value: `${contactQuantity != null ? contactQuantity + '吨' : '-'}` },
								{ title: `通知量`, value: `${noticeQuantity != null ? noticeQuantity + '吨' : '-'}` },
								{ title: `${this.propsSend.orderType == 'S' ? '发货' : '收货'}量`, value: `${sendQuantity != null ? sendQuantity + '吨' : '-'}` },
								{
									title: `${this.propsSend.orderType == 'S' ? '未发货' : '未收货'}`, value: `${unSendQuantity >= null ? unSendQuantity + '吨' : '-'}`, color: true
								},
								{ title: `(订单状态`, value: `${statusName})`, style: { fontSize: 12 * scale, color: '#666' } },
							]
						}} />
					</View>
					<View style={{ flex: 1 }}>
						{stockData ? (
							<FlatList
								data={stockData}
								extraData={this.state}
								renderItem={this._renderPayItemView.bind(this)}
								onEndReachedThreshold={0.5}
								onEndReached={this._onEndPayReached}
							/>
						) : <PageStatusIndex status={status} emptyText={'暂无数据'} />}
					</View>
				</View>
			</View >
		)
	}
}


const styles = StyleSheet.create({
	logItemTime: {
		fontSize: 14 * scale,
		textAlign: 'right',
		...commen.edge,
		marginTop: 20 * scale
	}
})